<template>
  <view class="body">
    <view class="progress">
      <up-line-progress
        :percentage="100 * (current / state.total) || 0"
        activeColor="#00d1b6"
        inactiveColor="#f5f5f5"
        :showText="false"
        height="16"
      ></up-line-progress>
      <text class="nums"
        ><text style="color: #00d1b6; font-size: 28rpx">{{ current }}</text
        >/{{ state.total }}</text
      >
    </view>
    <scroll-view class="scroll-X" scroll-x="true">
      <view class="tabList">
        <view
          :class="['item', state.tabActive == index ? 'on' : '']"
          v-for="(item, index) in state.tabList"
          :key="index"
          @tap="tabFun(index)"
        >
          <text class="text">{{ item }}</text>
        </view>
      </view>
    </scroll-view>
    <view class="wrap">
      <view v-if="state.questionList.length > 0" class="list">
        <view
          v-for="(item, index) of state.questionList[Number(state.tabActive)]?.list"
          :key="index"
          class="list_item"
        >
          <view v-if="index == 0" class="form_name">{{ state.questionInfo.itemName }}</view>
          <view v-if="index == 0" class="tips">请根据实际情况，选择最符合的选项</view>
          <view class="list_item_title">
            <view class="nums"
              ><text style="color: #00d1b6">{{ index + 1 }}</text
              >/{{ state.questionList[state.tabActive].list?.length }}</view
            >
            <view
              :class="[
                'tag',
                item.questionType == '单选' || item.questionType == '单选+输入' ? '' : 'check'
              ]"
              >{{ item.questionType }}</view
            >
            <view class="title">{{ item.questionName }}</view>
          </view>
          <view
            v-if="item.questionType == '单选' || item.questionType == '单选+输入'"
            class="selects"
          >
            <view
              v-for="(i, idx) of item.options"
              :key="idx"
              class="selects_item"
              @tap="radioSelect(i, index)"
            >
              <view v-if="!i.check" class="uncheck"></view>
              <image
                v-if="i.check"
                class="img_select"
                src="@/static/image/raozg/radio_select.png"
              />
              <view class="answer_text">{{ i.value }}</view>
            </view>
            <view v-if="item.value.indexOf('其他') != -1" class="area_input">
              <textarea
                v-model="item.inputText"
                type="text"
                :maxlength="300"
                class="input input_type"
                placeholder="请输入其他内容"
              />
              <view class="text_count">{{ getLength(item.inputText) }}/300</view>
            </view>
          </view>
          <view
            v-if="item.questionType == '多选' || item.questionType == '多选+输入'"
            class="selects"
          >
            <view
              v-for="(i, idx) of item.options"
              :key="idx"
              class="selects_item"
              @tap="checkSelect(i, index)"
            >
              <view v-if="!i.check" class="uncheck"></view>
              <image v-if="i.check" class="img_select" src="@/static/image/raozg/selected.png" />
              <view class="answer_text">
                {{ i.value }}
              </view>
            </view>
            <view v-if="item.value.indexOf('其他') != -1" class="area_input">
              <textarea
                v-if="item.value.indexOf('其他') != -1"
                v-model="item.inputText"
                type="text"
                :maxlength="300"
                class="input input_type"
                placeholder="请输入其他内容"
              />
              <view class="text_count">{{ getLength(item.inputText) }}/300</view>
            </view>
          </view>
          <view v-if="item.questionType == '输入'" class="area_input">
            <textarea
              type="text"
              :maxlength="300"
              v-model="item.inputText"
              class="input input_type"
              placeholder="请输入你的回答"
            />
            <view class="text_count">{{ getLength(item.inputText) }}/300</view>
          </view>
        </view>
      </view>
    </view>
    <view class="fixed">
      <button v-if="state.tabActive != 0" class="pre_btn" @tap="prev()">上一步</button>
      <button v-if="state.tabActive != state.tabList.length - 1" class="next_btn" @tap="next()">
        下一步
      </button>
      <button v-if="state.tabActive == state.tabList.length - 1" class="next_btn" @tap="next()">
        确认提交
      </button>
    </view>
    <up-modal
      :show="modalShow"
      :title="'健康随访'"
      :closeOnClickOverlay="true"
      :confirmColor="'#00D1B6'"
      confirmText="知道了"
      @confirm="confirm"
      @close="modalShow = false"
    >
      <view
        style="width: 100%; text-align: center; color: #4e5969; font-size: 30rpx; font-weight: 400"
        >问卷提交成功，健康管理师会尽快查看您提交的随访问卷</view
      >
    </up-modal>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, computed, nextTick } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { FollowSave } from '@/api/follow'
import { debounce, throttle, deepCopy } from '@/utils/tools'
import store from '@/store'

const state = reactive({
  followName: '',
  tabActive: 0,
  total: 0,
  tabList: [],
  questionList: [],
  questionInfo: {}
})
const userInfo = ref({})
const modalShow = ref(false)

let currentId = ''

const current = computed(() => {
  let num = 0
  state.questionList.forEach((item: any) => {
    item.list.forEach((val: any) => {
      if (val.value != '' || val.value.length > 0 || (val.inputText && val.inputText != '')) {
        num++
      }
    })
  })
  return num
})

onLoad((option) => {
  state.followName = option.name ? option.name : ''
})

onShow(() => {
  userInfo.value = JSON.parse(uni.getStorageSync('userInfo'))
  if (!currentId || currentId !== userInfo.value.patientInfo.empi) {
    currentId = deepCopy(userInfo.value.patientInfo.empi)
    // currentId = '74567895'
    init()
  }
})

const init = () => {
  state.questionInfo = store.state.FOLLOW
  state.questionList = JSON.parse(store.state.FOLLOW.itemContent)
  state.questionList.forEach((item) => {
    state.tabList.push(item.name)
    state.total += item.list.length
  })
}
const tabFun = (index) => {
  // tab切换
  state.tabActive = index
}

const radioSelect = (item, index) => {
  // 单选选择
  state.questionList[state.tabActive].list[index].options.forEach((val) => {
    val.check = false
  })
  state.questionList[state.tabActive].list[index].value = item.value
  if (item.value == '其他') {
    state.questionList[state.tabActive].list[index].inputText = ''
  }
  item.check = !item.check
}
const checkSelect = (item, index) => {
  // 多选选择
  if (!state.questionList[state.tabActive].list[index].value) {
    state.questionList[state.tabActive].list[index].value = item.value
  } else {
    // 已有选项情况，如果点击选项未选中，则加入chosen，否则删除
    if (!item.check) {
      state.questionList[state.tabActive].list[index].value.push(item.value)
    } else {
      let arr = state.questionList[state.tabActive].list[index].value
      if (arr.indexOf(item.value) != -1) {
        // 点击已选中的选项取消选中
        arr.splice(arr.indexOf(item.value), 1)
        state.questionList[state.tabActive].list[index].value = arr
      }
      if (item.value == '其他') {
        // 取消其他选项时清空输入内容
        state.questionList[state.tabActive].list[index].inputText = ''
      }
    }
  }
  item.check = !item.check
}

const prev = () => {
  state.tabActive--
}
const next = () => {
  let canNext = true
  state.questionList[state.tabActive].list.forEach((item) => {
    // 非输入类判断value是否为空，为输入时判断inputText是否为空
    if (
      (item.questionType != '输入' && (!item.value || item.value.length == 0)) ||
      (item.questionType == '输入' && !item.inputText)
    ) {
      canNext = false
    }
  })
  if (canNext) {
    // 通过必填校验，为最后一题则提交否则跳转下一题
    if (state.tabActive == state.questionList.length - 1) {
      let params = {
        ...state.questionInfo,
        userId: userInfo.value.userId,
        empi: currentId,
        itemContent: JSON.stringify(state.questionList),
        today: true,
        isRead: true
      }
      FollowSave(params).then((res) => {
        if (res.code == 0) {
          modalShow.value = true
        }
      })
    } else {
      state.tabActive++
    }
  } else {
    uni.showToast({
      title: '请完成' + state.tabList[state.tabActive] + '题目填写',
      icon: 'none'
    })
  }
}

const getLength = (e: string) => {
  if (e.length > 300) {
    return 300
  } else {
    return e.length || 0
  }
}

const confirm = () => {
  modalShow.value = false
  uni.navigateBack({
    delta: 0
  })
}
</script>

<style lang="scss" scoped>
.body {
  height: 100%;
  .progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16rpx;
    height: 88rpx;
    padding: 0 32rpx;
    background: #fff;
    .nums {
      font-weight: 400;
      font-size: 24rpx;
      color: #c9cdd4;
    }
  }
  .scroll-X {
    padding: 0 32rpx 24rpx;
    width: calc(100% - 64rpx);
    overflow-x: scroll;
    background: #fff;
    .tabList {
      white-space: nowrap;
      .item {
        display: inline-block;
        vertical-align: middle;
        padding: 0 30rpx;
        text-align: center;
        font-size: 28rpx;
        color: #222;
        position: relative;
        height: 64rpx;
        line-height: 64rpx;
        background: #fafafa;
        margin-right: 24rpx;
        border-radius: 32rpx;
        &:nth-last-child(1) {
          margin-right: 0;
        }
        &.on {
          color: #fff;
          font-weight: 700;
          background: #00d1b6;
        }
      }
    }
  }
  .wrap {
    margin-top: 32rpx;
    padding: 32rpx;
    padding-top: 0;
    height: calc(100vh - 404rpx);
    overflow-y: scroll;
    .scroll-Y {
      height: calc(100vh - 404rpx);
    }
    .list {
      position: relative;
      overflow: hidden;
    }
    .list_title {
      font-weight: 600;
      font-size: 32rpx;
      color: #ffffff;
      margin: 26rpx 28rpx 22rpx;
    }
    .img_bg {
      position: absolute;
      width: 686rpx;
      height: 208rpx;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .list_item {
      margin-bottom: 24rpx;
      background: #ffffff;
      border-radius: 16rpx;
      padding: 32rpx;
      .form_name {
        font-weight: 600;
        font-size: 36rpx;
        color: #222222;
      }
      .tips {
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
        margin-top: 8rpx;
        margin-bottom: 32rpx;
      }
      .list_item_title {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 8rpx;
        .nums {
          font-weight: 500;
          font-size: 24rpx;
          color: #666666;
        }
        .tag {
          width: 80rpx;
          height: 40rpx;
          line-height: 40rpx;
          text-align: center;
          background: #02bcc3;
          border-radius: 4rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #ffffff;
        }
        .check {
          background: #5c8eff;
        }
        .title {
          width: 480rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #222222;
        }
      }
      .selects {
        .selects_item {
          display: flex;
          justify-content: flex-start;
          align-items: top;
          margin-top: 32rpx;
          .uncheck {
            width: 40rpx;
            height: 40rpx;
            border: 1rpx solid #cfcfcf;
            box-sizing: border-box;
            border-radius: 50%;
          }
          .img_select {
            width: 40rpx;
            height: 40rpx;
          }
          .answer_text {
            font-weight: 400;
            font-size: 30rpx;
            color: #222222;
            margin-left: 26rpx;
          }
        }
      }
      .input {
        margin-top: 8rpx;
        margin-left: 64rpx;
        border-radius: 4rpx;
        border: 1rpx solid #e5e6eb;
        padding: 16rpx 24rpx;
      }
      .input_type {
        width: 560rpx;
        margin-top: 32rpx;
        margin-left: 0;
      }
      .area_input {
        position: relative;
        padding-bottom: 48rpx;
        .text_count {
          font-weight: 400;
          font-size: 28rpx;
          color: #666666;
          position: absolute;
          right: 32rpx;
          bottom: 0;
        }
      }
    }
  }
  .finish {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx;
    margin: 24rpx 32rpx;
    .finish_title {
      font-weight: 600;
      font-size: 32rpx;
      color: #222222;
      padding-bottom: 32rpx;
      border-bottom: 1rpx solid #e5e6eb;
    }
    .list {
      .item {
        margin-top: 32rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .imgs {
          width: 40rpx;
          height: 40rpx;
        }
        .title {
          font-weight: 500;
          font-size: 32rpx;
          color: #222222;
          margin-left: 16rpx;
        }
        .detail {
          width: 152rpx;
          height: 56rpx;
          line-height: 56rpx;
          text-align: center;
          font-weight: 400;
          font-size: 26rpx;
          color: #00d1b6;
          border-radius: 38rpx;
          border: 1rpx solid #00d1b6;
          margin-left: 48rpx;
        }
      }
    }
  }
  .fixed {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 10;
    padding: 24rpx 32rpx;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    box-sizing: border-box;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    gap: 24rpx;
    .pre_btn {
      background: #ffffff;
      width: 100%;
      border-radius: 44rpx;
      font-weight: 500;
      font-size: 32rpx;
      border: 1rpx solid #00d1b6;
      color: #00d1b6;
    }
    .next_btn {
      width: 100%;
      background: #00d1b6;
      border-radius: 44rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
  ::v-deep .u-modal__title {
    font-weight: 500 !important;
    font-size: 34rpx !important;
    color: #222222 !important;
  }
}
</style>
